<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"
                show-scrollbar="false">
                <view class="content-top fixed_top" id="content_top">
                    <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"
                        class="fixed_top" id="navBar"> </van-nav-bar>
                </view>
                <view class="main-container">
                    <template v-if="winningType == 1">
                        <view class="myScoreBg" ref="myScoreBg">
                            <img :src="giftInfo.integralPic" alt="" class="myScoreIcon">
                        </view>
                        <view class="giftDetail">
                            <view class="giftDetailTop">恭喜你获得</view>
                            <view class="giftDetailMiddle">{{giftInfo.winningIntegralNumber}}积分</view>
                            <view class="giftDetailBottom">{{giftInfo.integralWarmTips}}</view>
                        </view>
                        <view class="bottom">
                            <van-button type="default" :disabled="true">{{giftInfo.openTime}} 已领取</van-button>
                        </view>
                    </template>

                    <template v-if="winningType !== 1">
                        <view class="myScoreBg myCoupon" ref="myScoreBg" style="height: 640rpx;">
                            <view class="couponName">{{giftInfo.couponName}}</view>
                            <view class="ortherInfo">
                                <view class="otherInfo_left">
                                    <view class="useLimited">满￥300可用</view>
                                    <view>
                                        <view class="validity">2025/1/1-2025/2/1</view>
                                        <view class="" style="display: flex; align-items: center;margin-top: 16rpx;">
                                            <view class="couponType couponBtn">惊喜商城</view>
                                            <view class="useStatus couponBtn" style="margin-left:16rpx ;">未使用</view>
                                        </view>
                                    </view>
                                </view>
                                <view class="otherInfo_right"><img :src="giftInfo.couponPic" alt=""> </view>
                            </view>
                        </view>
                        <view class="giftDetail_coupon" style="margin-top: 688rpx;">
                            <view class="useTipsTitle">使用规则</view>
                            <view class="couponTips">{{giftInfo.couponTips}}</view>
                            <!-- <view class="giftDetailBottom">{{giftInfo.integralWarmTips}}</view> -->
                        </view>
                        <view class="bottom">
                            <van-button type="primary" @tap="toUseCoupon" :disabled="giftInfo.isUse">去使用</van-button>
                        </view>
                    </template>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { blindboxintegralApi,blindboxCouponApi } from '@/api/checkedInTask'
export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '我的礼品',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            winningType:0, //礼品类型
            blindBoxReceiptsRecordId:1, //盲盒领取记录id
            giftInfo:{
                couponName:'17乐生活惊喜商城冬日唤醒活力券-立减¥100',
                useLimited:'满￥300可用',
                validity:'2025/1/1-2025/2/1',
                couponPic:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/coupon.png',
                couponTips:'优惠券有效期内，可在17乐生活小程序中使用，可在“我的”-“优惠券”中查看',
                couponNumber:10,
                couponType:'惊喜商城',
                isUse:false,
            },


        }
    },
    onLoad(data) {
        console.log(data)
        if(data && data.params){
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,'params')
            this.winningType = this.params?.winningType || 0
            this.blindBoxReceiptsRecordId = this.params?.blindBoxReceiptsRecordId || undefined
        }
      
    },
    onShow(){
        if(this.winningType == 1){ //积分
            this.checkedMyGiftDetailAboutIntergral()
        }else if (this.winningType == 2){ //优惠券
            this.checkedMyGiftDetailAboutCoupon()
        }else{

        }
    },
    onReady(){

    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 我的礼品详情
        toMyGiftDetailPage(){
            uni.navigateTo({
                url:'/pages/blindBox/myGiftInfo'
            })
        },
        toUseCoupon(){
            uni.navigateTo({
                url:'/pages/minePage/myCouponList'
            })
        },
        checkedMyGiftDetailAboutCoupon(item){
            blindboxCouponApi({blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.giftInfo = res.data
                }
            })
        },
        checkedMyGiftDetailAboutIntergral(item){
            blindboxintegralApi({blindBoxReceiptsRecordId:this.blindBoxReceiptsRecordId}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.giftInfo = res.data
                }
            })
        }
       
    }
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}


.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // height: 100vh;
    height: calc(100vh - env(safe-area-inset-bottom));
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;
    padding-bottom: (safe-area-inset-bottom);

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.scroll-content {
    flex: 1;
    height: 1px;
}
.main-container {
    background: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}
.myScoreBg {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 750rpx;
    background-color: #f7f7f7;

    .top_swiper {
        display: block;
        height: 750rpx;
    }

    .myScoreIcon {
        width: 100%;
        height: 750rpx;
    }
}
.myCoupon {
    height: 640rpx!important;
    background-color: #f7f7f7;
    padding: 0 48rpx 40rpx 48rpx ;
    width: calc(100% - 96rpx);
   .couponName {
        margin-top: 170rpx;
        font-weight: bold;
        font-size: 48rpx;
        line-height: 72rpx;
        text-align: left;
        color: #333;
        // 超过两行  文字用myAllGiftList号
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    .ortherInfo{
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;
    }
    .otherInfo_left{
        display: flex;
        flex-direction: column;
        justify-content: space-between;


        .validity{
            font-weight: 400;
            font-size: 28rpx;
            text-align: left;
            color: #999;
        }
        .couponBtn{
            font-weight: 400;
            font-size: 20rpx;
            text-align: center;
            color: #ff6203;
            padding: 6rpx 20rpx;
            border-radius: 4rpx;
            background: #fff4ed;
            border: 1rpx solid #ff6202;
        }
    }
    .otherInfo_right{
        width: 200rpx;
        height: 260rpx;

        img{
            width: 100%;
            height: 100%
        }
    }
    .useLimited{
        font-weight: 400;
        font-size: 32rpx;
        text-align: left;
        color: #000;
    }
}
.giftDetail{
    z-index: 1;
    margin-top: 807rpx;
    padding: 0px 48rpx;
    .giftDetailTop{
        font-size: 32rpx;
        text-align: left;
        color: #666666;
        line-height: 32rpx;
    }
    .giftDetailMiddle{
        font-size: 48rpx;
        text-align: left;
        color: #111111;
        line-height: 48rpx;
        margin: 42rpx 0rpx;
    }
    .giftDetailBottom{
        font-size: 22rpx;
        text-align: left;
        color: #666666;
        line-height: 22rpx;
    }
}
.giftDetail_coupon{
    position: relative;
    top: 48rpx;
    padding: 0px 48rpx;
    z-index: 1;
    .useTipsTitle{
        font-weight: bold;
        font-size: 36rpx;
        text-align: left;
        color: #000;
    }
    .couponTips{
        margin-top: 32rpx;
        font-weight: 400;
        font-size: 32rpx;
        text-align: left;
        color: #666;
    }
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}

::v-deep .van-button--default {
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    margin-left: 48rpx;
    margin-right: 48rpx;
    width: calc(100% - 96rpx);
    height: 76rpx;
    border-radius: 48rpx;
    background: transparent !important;
    border: 1px solid #D4D4D4 !important;
    color: #888888 !important;
}

// 弹窗中的确认按钮样式
::v-deep .van-button--danger {
    background:#ff6203!important;
    border:#ff6203!important;
    color: var(--button-danger-color,#fff);
}
</style>
